<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<%@include file="/include/head_libs.jsp" %>
<script type="text/javascript" src="<c:url value='/assets/js/admin/admin_movie.js'/>"></script>
<body class="bg-gray-100 font-sans h-screen">

<div class="flex flex-col w-full p-4 select-none">
    <!-- Header Section -->
    <div class="header flex flex-col h-16 p-2 border border-gray-300 rounded-lg mb-4">
        <div class="search flex items-center justify-center space-x-1">
            <input type="text" id="searchQuery" class="input input-bordered w-72" placeholder="搜索影片名"/>
            <button class="btn btn-primary" id="searchBtn">搜索</button>
        </div>
    </div>

    <!-- List Section -->
    <div class="h-[600px] overflow-y-auto mb-4">
        <table class="table table-zebra w-full">
            <thead>
            <tr>
                <th>影片ID</th>
                <th>影片名称</th>
                <th>类型</th>
                <th>更新时间</th>
                <th>最近更新</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="movieList">
            <!-- 动态渲染影片列表 -->
            </tbody>
        </table>
    </div>

    <!-- Pagination Section -->
    <div class="flex justify-center">
        <div class="btn-group" id="pagination">
            <!-- 分页按钮将在这里动态生成 -->
        </div>
    </div>

    <!-- Modal Dialog for Edit -->
    <div id="modal" class="fixed inset-0 bg-opacity-10 glass hidden">
        <div class="modal modal-open rounded-lg p-2 w-96 h-fit m-auto">
            <h3 id="modalTitle" class="text-lg font-semibold">编辑影片</h3>
            <form id="movieForm" class="space-y-1 mt-2">
                <div class="form-control">
                    <label for="movieId" class="label">影片ID</label>
                    <input type="text" id="movieId" class="input input-bordered w-full" placeholder="影片ID" readonly/>
                </div>
                <div class="form-control">
                    <label for="movieName" class="label">影片名称</label>
                    <input type="text" id="movieName" class="input input-bordered w-full" placeholder="请输入影片名称"
                           required/>
                </div>
                <div class="form-control">
                    <label for="typeName" class="label">类型</label>
                    <input type="text" id="typeName" class="input input-bordered w-full" placeholder="影片类型"
                           required/>
                </div>
                <div class="form-control">
                    <label for="vodEn" class="label">英文名</label>
                    <input type="text" id="vodEn" class="input input-bordered w-full" placeholder="英文名" required/>
                </div>
                <div class="form-control">
                    <label for="vodTime" class="label">发布时间</label>
                    <input type="text" id="vodTime" class="input input-bordered w-full" placeholder="发布时间"
                           required/>
                </div>
            </form>
            <div class="modal-action flex justify-end">
                <button class="btn" id="cancelBtn">取消</button>
                <button class="btn btn-primary" id="submitBtn">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>